<template>
  <page-frame>
    <div class="retreat-main">
      <div class="toptitle">
        <div class="left">会员退住-退住确认</div>
        <div class="right">
          <div class="btns">
            <el-button @click="confirmBack">确&nbsp认</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <div class="retreatProcess02">
        <div class="step-show" @click="showStep">
          <img src="../../img/show.png" class="step-show-img" v-show="isShowStep">
          <img src="../../img/hidden.png" class="step-show-img" v-show="!isShowStep">
          {{show}}
        </div>
        <div class="steptar" v-show="isShowStep">
          <stepRetreat :stepData="stepData"></stepRetreat>
        </div>
        <div class="check-confirm-main">
          <div class="title">退住流程办理成功!</div>
          <div class="content">
            <div class="left"><img src="../../img/placeholder.png" alt=""></div>
            <div class="right">
              <table cellpadding="0" cellspacing="0">
                <tr>
                  <th>请确认您的退住信息</th>
                </tr>
                <tr>
                  <td>
                    会员姓名: <span>{{informationConfirm.memberName}}</span></td>
                </tr>
                <tr>
                  <td>
                    会员编号: <span>{{informationConfirm.memberNo}}</span></td>
                </tr>
                <tr>
                  <td>
                    入住床位: <span>{{informationConfirm.bedInfo}}</span></td>
                </tr>
                <tr>
                  <td>
                    退住时间: <span>{{informationConfirm.outApplyDate}}</span></td>
                </tr>
                <tr>
                  <td>
                    退住原因: <span>{{informationConfirm.outApplyReason}}</span></td>
                </tr>
                <tr>
                  <td>
                    结算费用: <span>{{informationConfirm.sunCost}}</span></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </page-frame>
</template>

<script>
  import stepRetreat from '../../components/stepbar/retreat.vue';
  import retiredApi from '../../service/member/retiredApi';
  import commonApi from '../../service/member/commonApi';
  export default {
    methods: {
      init(){
        this.currentMemberObj = this.$route.params.memberObj;
        this.infoConfirm();
      },
      /**
       * 获取退住确认详情
       */
      infoConfirm(){
        retiredApi.confirmRetired(this.currentMemberObj.actId).then(res =>{
          this.informationConfirm = res.body.data;
        },res =>{});
      },
      /**
       * 流程确认
       */
      confirmBack(){
        commonApi.confirmCompleteProcess(this.currentMemberObj.actId).then(res => {
          this.$router.push({name: 'membersRetired'});
        },res =>{
          this.$message({
            type: 'error',
            message: res.data.message
          });
        });
      },
      //显示或者隐藏流程图
      showStep(){
        this.isShowStep =  !this.isShowStep;
        (this.isShowStep == false) ? (this.show = "显示流程图"):(this.show = "隐藏流程图");
      },
    },
    mounted: function () {
      this.init();
    },
    components:{
      stepRetreat
    },
    data() {
      return {
        stepData:3,
        currentMemberObj:{},
        informationExpenseItem:[],
        memberDTO:{},
        accountDTO:{},
        queryData:{
          "actId": 2,
          "memberId":1,
          "taskId": ""
        },
        informationConfirm:{
          "memberId": "",
          "memberName": "",
          "memberNo": "",
          "bedInfo": "",
          "outApplyDate": "",
          "outApplyReason": "",
          "sunCost": ""
        },
        isShowStep:false,
        show:"显示流程图",
      }
    },

  }
</script>
<style>
  .retreatProcess02{
    margin: auto 50px;
  }
  .retreatProcess02 .el-card__header{
    padding: 3px 20px;
  }
  .retreatProcess02 .info{
    margin-bottom:10px;
    font-size:13px;
  }
  .retreatProcess02 .card{
    margin-bottom:10px;
  }
  .retreatProcess02 .reviewItem{
    height:36px;
    line-height:36px;
    width:100%;
    background-color:#eef1f6;
    margin-bottom:5px;
    font-size: 14px;
  }
  .retreatProcess02 .retreat-content{
    width: 80%;
    margin: 0 auto;
    padding-left: 30px;
  }
  .retreatProcess02 .retreat-content .bar{
    margin-bottom:18px;
    margin-top: 50px;
  }
  .retreatProcess02 .el-table{
    width: 90%!important;
  }
  .check-confirm .stepbar{
    margin-top: 66px;
  }
  .check-confirm-main{
    width: 800px;
    margin: 0 auto;
    overflow: hidden;
  }
  .check-confirm-main .title{
    color:#3fc6d2;
    font-size: 22px;
    width: 190px;
    margin: 50px auto;
  }

  .check-confirm-main .left{
    float: left;
  }
  .check-confirm-main .right{
    float: right;
    margin-top: 20px;
  }
  .check-confirm-main .right table{
    width: 300px;
    border: 1px solid #dfe6ec;
    border-radius: 6px;
  }
  .check-confirm-main .right tr th {
    background-color:#dfe6ec;
    padding: 10px 10px;
  }
  .check-confirm-main .right tr td {
    border-width: 1px;
    border-style: solid;
    border-color: #dfe6ec;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 10px;
  }
</style>


